<template>
    <div>
        <a-layout id="components-layout-demo-side" style="min-height: 100vh">
            <a-layout-sider breakpoint="lg" collapsed-width="0" style="position: fixed; left: 0; top: 0; bottom: 0; z-index: 999">
                <center style="color: white; font-weight: bold; font-size: medium">
                    <br/>
                    个人中心
                    <br/>
                </center>
                <a-menu theme="dark" mode="inline" :default-selected-keys="[$route.path]" @select="select">
                    <a-menu-item key="/home">
                        <span class="nav-text">回到主站</span>
                    </a-menu-item>
                    <a-menu-item v-for="i in navs" :key="i.path" v-if="i.meta.nav">
                        <span class="nav-text">{{i.name}}</span>
                    </a-menu-item>
                </a-menu>
            </a-layout-sider>
            <a-layout id="m-right">
                <a-layout-header style="background: #fff; padding: 0">
                    <strong style="margin-left: 20px">
                        尽心尽力写生活 / 个人中心 / {{$route.name}}
                    </strong>
                </a-layout-header>
                <br/>
                <a-layout-content style="margin: 0 16px">
                    <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
                        <router-view/>
                    </div>
                </a-layout-content>
                <a-layout-footer style="text-align: center">
                    © Daman 静心尽力写生活
                </a-layout-footer>
            </a-layout>
        </a-layout>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data(){
            return{
                navs: this.$router.options.routes[1].children,
            }
        },
        methods:{
            select({ item, key, selectedKeys }){
                if (key=='/home'){
                    location.href = 'https://jxjlife.cn';
                } else {
                    this.$router.push(key)
                }
            }
        }
    }
</script>

<style scoped>
    #components-layout-demo-responsive .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px;
    }
    #m-right{
        margin-left: 200px;
    }
    @media screen and (max-width: 992px){
        #m-right{
            margin-left: 0;
        }
    }
</style>